<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: rgb(189,227,255);
			}
			.obox{
				width: 560px;
				margin: 100px auto 0px;
			}
			ul{
				display: flex;
				list-style: none;
			}
			li{
				width: 110px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				margin-right: 10px;
				position: relative;
				cursor: pointer;
			}
			.box{
				background: white;
				padding: 20px 15px;
				display: none;
			}
			.box1{
				display: block;
			}
			.box h3{
				font-size: 30px;
			}
			ul h3{
				position: relative;
				z-index: 10;
			}
			ul div{
				background: white;
				height: 0px;
				position: absolute;
				bottom: 0px;
				width: 100%;
				transition: all 0.5s;
				border-top:solid 2px orangered ;
			}
			ul li:nth-child(1) div{
				height: 40px;
			}
		</style>	
		<script src="js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("li").on({"mouseenter":enter,"mouseleave":leave,"click":myclick})
				$("li").eq(0).off({"mouseenter":enter,"mouseleave":leave});
				function enter(){
					$(this).find("div").css("height","40px");
				}

				function leave(){
					$(this).find("div").css("height","0px");
				}
				
				function myclick(){
					$(this).off({"mouseenter":enter,"mouseleave":leave});
					$(this).siblings("li").on({"mouseenter":enter,"mouseleave":leave})
					$(".box").css("display","none");
					$(".box").eq($(this).index()).css("display","block");
					$(this).siblings("li").find("div").css("height",0)
				}
			})
		</script>
	</head>
	<body>
		<div class="obox">
			<ul>
				<li>
					<h3>section1</h3>
					<div></div>
				</li>
				<li>
					<h3>section2</h3>
					<div></div>
				</li>
				<li>
					<h3>section3</h3>
					<div></div>
				</li>
			</ul>
			<div class="box box1">
				<h3>section1</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.</p>
			</div>
			<div class="box">
				<h3>section2</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.</p>
			</div>
			<div class="box">
				<h3>section3</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.</p>
			</div>
		</div>
	</body>
</html>
